<template>
  <div class="singer-album">
    <div class="album-img" v-if="imgShow">
      <slot name="albumImg">
        <img src="~assets/img/musicplay/top.png" alt="404" />
      </slot>
    </div>
    <div class="album-list" :style="{ width: wth }">
      <div class="album-list-top">
        <h4>{{ title }}</h4>
        <div class="sell-btn" @click="addCollect(0)">
          <el-icon><folder-add /></el-icon>
        </div>
        <div class="play-btn" @click="playMusicList(dataList[0])">
          <el-icon><video-play /></el-icon>
        </div>
      </div>
      <page-music-table
        :contentTableConfig="contentTableConfig"
        :dataList="dataList.slice(0, showNum)"
        :propName="propName"
        :lookShow="lookShow"
        :headerBtnShow="false"
        :total="dataList.length"
        @handleShowAll="handleShowAll"
        @hanelDbPlay="hanelDbPlay"
      >
      </page-music-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { useStore } from 'vuex'
import { contentTableConfig } from '../config/table-config'
import PageMusicTable from '@/components/page-find-music/page-news-music/page-music-table'
const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  },
  imgShow: {
    type: Boolean,
    default: true
  },
  wth: {
    type: String,
    default: '70%'
  },
  title: {
    type: String,
    default: '热门50首'
  }
})
const store = useStore()
const propName = { time: 'dt', artists: 'ar', album: 'al' }
const addCollect = (id: number) => {
  console.log(id)
}
const playMusicList = (song: any) => {
  console.log(song)
}
const lookShow = ref(true)
const showNum = ref(10)
if (props.dataList.length <= 10) {
  lookShow.value = false
}
const handleShowAll = () => {
  showNum.value = props.dataList.length
  lookShow.value = false
}
const hanelDbPlay = () => {
  store.commit('music/updateMusicList', props.dataList)
}
</script>

<style lang="less" scoped>
.singer-album {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .album-img {
    width: 150px;
    height: 150px;

    img {
      width: 150px;
      height: 150px;
    }
  }
  .album-list {
    position: relative;
    padding-bottom: 20px;
    .album-list-top {
      display: flex;
      h4 {
        margin: 6px 0;
        margin-right: 6px;
      }
      .sell-btn,
      .play-btn {
        position: relative;
        top: 5px;
        margin: 0 3px;
        font-size: 18px;
        color: #666;
        cursor: pointer;

        &:hover {
          color: red;
        }
      }
    }
  }
}
</style>
